<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ模拟短信发送</title>
		<style type="text/css">
			body, input, ul, p{
				margin: 0;
				padding: 0;
			}
			input{
				border: none;
				background: none;
			}
			li{
				list-style: none;
			}
			#phone{
				width: 288px;
				height: 594px;
				background: url(img/iphone_bg.gif);
				position: absolute;
				left: 0;
				top: 0;
			}
			#content{
				width: 240px;
				height: 440px;
				border: 3px solid #000000;
				margin: 70px auto;
				position: relative;
				background: #fff;
			}
			#content form{
				width: 240px;
				height: 30px;
				padding: 10px 0;
				background: #f7f7f7;
				position: absolute;
				bottom: 0;
				left: 0;
				font-size: 0;
			}
			#content input{
				line-height: 30px;
				font-size: 12px;
				border: 1px solid #CCCCCC;
				outline: none;
				background: #fff;
				vertical-align: middle;
			}
			#content .headPortrait{
				width: 24px;
				height: 24px;
				border: 1px solid #CCCCCC;
				padding: 3px;
				vertical-align: top;
				background: #FFFFFF;
				margin-left: 10px;
				vertical-align: middle;
			}
			#content .word{
				height: 30px;
				width: 140px;
				margin: 0 4px;
				color: #CCCCCC;
			}
			#content .submit{
				height: 32px;
				width: 32px;
			}
			#content ul{
				width: 100%;
				height: 100%;
				overflow: auto;
			}
			#content li{
				padding: 4px 10px;
				margin: 0 auto;
				*zoom: 1;
			}
			#content li:after{
				content: "";
				display: block;
				clear: both;
			}
			#content .left *{
				float: left;
			}
			#content .left p{
				margin-left: 6px;
				max-width: 160px;
				background: limegreen;
				color: #fff;
				line-height: 24px;
				word-break: break-all;
			}
			#content .right *{
				float: right;
			}
			#content .right p{
				margin-right: 6px;
				max-width: 160px;
				background: #CCCCCC;
				color: #fff;
				line-height: 24px;
				word-break: break-all;
			}
		</style>
		<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function (){
				
				var onOff = true;
				
				//切换头像
				$('.headPortrait').click(function (){
					onOff = !onOff;
					$(this).attr('src','img/iphone_user'+(onOff?1:2)+'.gif');
				});
				
				//输入框获取焦点
				$('.word').focus(function (){
					if ($(this).val()=='点击头像，输入内容，发送') $(this).val('').css('color','#000000');
				});
				
				//输入框失去焦点
				$('.word').blur(function (){
					if ($(this).val()=='') $(this).val('点击头像，输入内容，发送').css('color','#CCCCCC');
				});
				
				//发送
				$('.submit').click(function (){
					if ($('.word').val()=='点击头像，输入内容，发送') {
						alert('请输入内容');
					} else {
						$('<li class="'+(onOff?'left':'right')+'"><img src="img/iphone_user'+(onOff?1:2)+'.gif" /><p>'+$('.word').val()+'</p></li>').prependTo($('ul'));
						$('.word').val('');
					}
				});
				
			});
		</script>
	</head>
	<body>
		<div id="phone">
			<div id="content">
				<ul></ul>
				<form action="#">
					<img class="headPortrait" src="img/iphone_user1.gif" />
					<input class="word" type="text" value="点击头像，输入内容，发送"/>
					<input class="submit" type="button" value="发送" />
				</form>
			</div>
		</div>
	</body>
</html>
